<template>
    <!-- <div>封堵白名单</div> -->
    <a-row>
      <a-col>
        <a-card :bordered="false" style="margin-bottom: 10px">
          
          <div class="table-page-search-wrapper">
            <a-form-model ref="ruleForm" :model="pageFilter" :label-col="labelCol" :wrapper-col="wrapperCol">
              <a-row style="display:flex">
                <a-col :span="6">
                <a-form-model-item label="上报主题">
                    <a-input placeholder="请输入任务名称" v-model="pageFilter.reportSubject"/>
                </a-form-model-item>
              </a-col>
              <!-- <a-col :span="6">
                <a-form-model-item label="诈骗类型" style="margin-left:0px">
                  <a-select style="width:100%">

                  </a-select>
                </a-form-model-item>
              </a-col> -->
                <a-col :span="6">
                <a-form-model-item label="上报时间" style="margin-left:0px">
                    <a-date-picker style="width:100%" v-model="pageFilter.reportTime"/>
                </a-form-model-item>
              </a-col>
              </a-row>
                <a-form-model-item label="备注说明" :label-col="{ span: 2 }" >
                    <!-- <a-textarea placeholder="Autosize height based on content lines" style="width:100%"/> -->
                    <a-textarea placeholder="Controlled autosize" :auto-size="{ minRows: 3, maxRows: 10 }" v-model="pageFilter.remark"/>
                </a-form-model-item>
            </a-form-model>
          </div>
        </a-card>
        <a-card :bordered="false">
          <div>
            <a-button type="primary" @click="onAdd(1)" style="margin-right:10px" v-if=" this.type != 'Details'">添加</a-button>
            <!-- <a-button type="primary"  style="margin-right:10px" ghost v-if=" this.type != 'Details'" @click="importt">导入</a-button> -->
            <a-button type="primary" @click="handleModal()" ghost v-if=" this.type != 'Details'" style="margin-right:10px">导入</a-button>
            <!-- <j-upload v-model="pageFilter.file" style="display: inline-block;margin-right:10px" text="导入" v-if=" this.type != 'Details'"/>
            <a-button type="primary" v-if="pageFilter.file" ghost @click="onInport()" style="margin-right:10px">确认导入</a-button> -->
            <a-button   style="margin-right:10px" v-if=" this.type != 'Details'" @click="down">下载模板</a-button>
            <a-button type="danger" @click="onDelete" style="margin-right:10px" ghost v-if=" this.type != 'Details'">删除</a-button>
            <z-table ref="table" rowKey="id" :showAlert="false" :showSelection="true" :loading="loading"
              :columns="columns" :dataSource="pageData" @selectedRowKey="onSelectedRow" @change="onTableChange" >
                <template slot="action" slot-scope="text,record,index">
                    <a-button type="link" @click="onAdd(2,index)">编辑</a-button>
                    <a-button type="link" @click="onDelete(index)" >删除</a-button>
                </template>
                <template slot="fraudType" slot-scope="text">
                    <span> {{ aa(text) }}</span>
                </template>
            </z-table>
          </div>
          <div style="margin-left:40%;margin-bottom: 10%;margin-top: 50px;">
                <a-button style="margin-right:30px" type="primary" v-if=" this.type != 'Details'" @click="save(0)">保存</a-button>
                <a-button v-if=" this.type != 'Details'" @click="save(1)">提交</a-button>
            </div>
        </a-card>
      </a-col>
      <AddModal ref="addModalId" :title=title  @ok="onQuery" :label=label @add="add" @delectt="edit"/>
      <lead-files-modal v-if="leadModalBool" ref="leadModal" :isLoadServerFile="true" :onEnd="handleOk" :noShow="'a'"/>
    </a-row>
  </template>
  
  <script>
  import AddModal from '@/views/plugging/police/modules/FraudAddModal'
  import { downLoadMix } from '@/utils/export-util/util'
  import { getDictItemsFromCache } from '@/api/api'
  import { saveBlockingWebsiteReport,findByIdBlockingWebsiteReport,exportBlockingBlackList
  ,importBlockingBlackList } from '@/api/plugging/Police'
  import leadFilesModal from '@/components/zxd/upload/draggerUploadFiles'
  export default {
    mounted () {
      this.type = this.$route.query.type
      this.id = this.$route.query.id
      if(this.type == 'Details'){
        this.columns.pop()
        this.detailss()
      }
      // else{ this.columns.push(this.action) }
    },
    components: {
    AddModal,leadFilesModal,
  },
    data () {
      return {
        leadModalBool: false,
        id:'',
        index:[],
        fraud_typeArr:getDictItemsFromCache('case_fraud_type'),
        action:{
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          scopedSlots: { customRender: 'action' },
        },
        type:'',
        title: "",
        label:'',
        show:false,
        labelCol: { span: 7 },
        wrapperCol: { span: 16 },
        loading: false,
        pageFilter: {
          pageNo: 1,
          pageSize: 10,
        },
        pageData: [],
        columns:[
          {
            title: '序号',
            dataIndex: 'order',
            width: 60,
            align: 'center',
            customRender: (text, record, index) =>
              `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
          },
          // (this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)
          {
            title: '诈骗类型',
            dataIndex: 'fraudType',
            align: 'center',
            scopedSlots: { customRender: 'fraudType' },
          },
          {
            title: '封堵地址',
            dataIndex: 'fraudUrl',
            align: 'center',
          },
          {
            title: '操作',
            dataIndex: 'action',
            align: 'center',
            scopedSlots: { customRender: 'action' },
          },
          
        ]
      }
    },
    methods: {
      async detailss(){
        let obj = { id:this.id}
        await findByIdBlockingWebsiteReport(obj).then((res) => {
        if (res.success) {
          this.pageData = res.result ? res.result.listBlockingBlackListDto : {}
          this.pageFilter = res.result
          this.pageFilter.pageNo = 1
          this.pageFilter.pageSize = 10
          // console.log(res.result);
          this.loading = false
        } else {
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })

        this.id = ''
      },
    //   onInport() {
    //     importBlockingBlackList(this.pageFilter.file).then( res => {
    //             if (res.success) {
    //               this.$message.success(res.message)
    //               // this.onQuery()
    //               this.pageFilter.file = ''
    //             } else {
    //               this.$message.success(res.message)
    //               this.loading = false
    //             }
    //             })
    //             .catch((e) => {
    //               this.loading = false
    //               this.$message.warn('请求失败！')
    //             })
    // },
      aa(text){
        return this.fraud_typeArr[text-1].text
      },
      add(val){
        this.pageData.push(val)
        console.log(val);
        console.log(this.pageData);
      },
      edit(val){
        let a = val.index
        delete val.index
        // this.pageData[a] = val
        this.$set(this.pageData,a,val)
        console.log(this.pageData);
      },
      async save(type){
      if(this.id){ this.pageFilter.id = this.id}
      this.pageFilter.reportStatus = type
      this.pageFilter.reportTime = this.timestampToTime(this.pageFilter.reportTime)
      this.pageFilter.listBlockingBlackListDto = this.pageData
        await saveBlockingWebsiteReport(this.pageFilter).then((res) => {
        if (res.success) {
          this.$message.success(res.message)
          this.loading = false
        } else {
          this.$message.warn(res.message)
          this.loading = false
        }
      })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })

        this.id = ''
        this.$router.push({
        path: '/plugging/police/InvolvingFraud/InvolvingFraud',
        query: {}
      })
      },
      down(){
        exportBlockingBlackList().then(
          async res => {
              if(res && res.size>0) {
                const fileName = '涉诈网址上报表.xls'
                await downLoadMix(res, fileName)
              } else {
                this.$message.warn("导出失败！")
              }
          })
          .catch((e) => {
            this.loading = false
            this.$message.warn('请求失败！')
          })
      },
      onAdd(type,index) {
      if (type == 1) {
        this.title = "添加封堵地址"
      } else {
        this.title = "编辑封堵地址"
      }
      this.label = '封堵地址'
      this.$refs.addModalId.show(type,index)
    },
      onQuery() {
        this.pageFilter.pageNo = 1
        this.refreshTable()
      },
      //重置
      onResetForm() {
        this.pageFilter = {
          pageNo: 1,
          pageSize: 10,
        }
        this.refreshTable()
      },
      onSelectedRow(keys) {
        this.index = keys
        console.log(this.index);
        this.selectKeys = keys
        this.isDisabled = keys.length > 0 ? false : true
      },
      onTableChange(pagination, pageFilter, sorter) {
        let keyMap = { currentPage: 'pageNo' }
        let paginations = Object.keys(pagination).reduce((newData, key) => {
          let newKey = keyMap[key] || key
          newData[newKey] = pagination[key]
          return newData
        }, {})
        this.pageFilter = Object.assign({}, this.pageFilter, paginations)
        this.refreshTable()
      },
      onDelete(record){
        console.log(record);
        if(typeof(record) == 'number'){ 
          this.ondelete(record) 
        }
        else{
      let reversearr = []
      this.index.forEach(item => { reversearr.unshift(item) })
      let index = reversearr
      let ondelete = this.ondelete
      let clear =  this.$refs.table.onClearRowKeys
      this.$confirm({
        title: `是否确定删除对应的记录`,
        okText: "确定",
        okType: "danger",
        cancelText: "取消",
        onOk() {
          index.forEach(item => {
              ondelete(item)
          });
          clear()
        },
        onCancel(){
          console.log('取消');
        }
      });
      }
    },
    timestampToTime(timestamp) {
        if (timestamp === 0 || timestamp == null) {
          return ''
        } else {
          var date = new Date(Date.parse(timestamp))
          var Y = date.getFullYear() + '-'
          var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
          var D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' '
          var H = date.getHours() + ':'
          var M2 = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':'
          var S = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
          return Y + M + D + H + M2 + S
        }
      },
    ondelete(index){
      this.pageData.splice(index,1)
    },
    // 导入操作
    handleOk(formData) {
      this.$refs.leadModal.loading=true
      importBlockingBlackList(formData)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.pageData = res.result
            this.leadModalBool = false
            this.onQuery()
          } else {
            this.$refs.leadModal.loading = false
            this.$error({
              title: '提示',
              content: h => <span domPropsInnerHTML={res.message} />
            })
          }
        })
        .catch((e) => {
          this.$refs.leadModal.loading = false
          this.$message.error('导入出错了')
        })
    },
    handleModal() {
      this.leadModalBool = true
      this.$nextTick(()=>{
        this.$refs.leadModal.visible=true
      })
    },
    }
  }
  </script>
  
  <style lang="less" scoped>
  .search-wrapper-btn {
    position: absolute;
    right: 20%;
    top: 22px;
    z-index: 100;
  }
  </style>